<template>
  <div class="users">
    <div class="search-from flex justify-between">
      <el-form :inline="true" :model="searchFrom">
        <el-form-item label="用户账号：">
          <el-input v-model="searchFrom.userName" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名：">
          <el-input v-model="searchFrom.realName" placeholder="请输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" plain @click="reset">重置</el-button>
          <el-button v-has="230" type="success" @click="handle('add')">新增</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <div class="table-list">
      <el-table ref="table" :data="tableData" stripe border tooltip-effect="dark" style="width: 100%">
        <el-table-column label="序号" width="60">
          <template slot-scope="scope">
            <span>{{ searchFrom.pageSize * (searchFrom.pageIndex - 1)  + 1 + scope.$index }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户账号" prop="userName">
        </el-table-column>
        <el-table-column prop="realName" label="真实姓名">
        </el-table-column>
        <el-table-column prop="mobile" label="手机号">
        </el-table-column>
        <el-table-column prop="email" label="邮箱">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handle('detail', scope.row)">查看</el-button>
            <el-button v-has="231" type="text" @click="handle('edit', scope.row)">编辑</el-button>
            <el-button v-has="232" type="text" @click="handle('role', scope.row)">配置角色</el-button>
            <el-button v-has="233" type="text" @click="handle('init', scope.row)">初始化密码</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="margin-t-10 margin-b-10 text-center">
        <el-pagination @current-change="changePage" :current-page.sync="searchFrom.pageIndex" :page-size="searchFrom.pageSize" layout="prev, pager, next, jumper" prev-text="上一页" next-text="下一页" :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 新增、编辑、查询 -->
    <addUser v-if="dialogParams.visible" :dialog-params="dialogParams" @getList="getList"></addUser>
    <setUserRole v-if="roleParams.visible" :dialog-params="roleParams" @getList="getList"></setUserRole>
  </div>
</template>

<script>
import { getUserList } from '@/api/systemManage'
import addUser from './modules/addUser'
import setUserRole from './modules/setUserRole'
import { initPwd } from '../../api/system'
import { filterParams } from '../../config/utils'

export default {
  name: 'users',
  components: {
    addUser,
    setUserRole
  },
  data() {
    return {
      searchFrom: {
        realName: '',
        pageSize: 10,
        pageIndex: 1
      },
      // 表格参数
      total: 0,
      tableData: [],
      // 新增、编辑、查询用户相关参数
      dialogParams: {
        visible: false,
        id: '',
        title: '',
        type: ''
      },
      // 配置角色相关参数
      roleParams: {
        visible: false,
        id: '',
        title: '',
        type: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 列表数据
    getList() {
      const params = filterParams(this.searchFrom)
      getUserList(params)
        .then(res => {
          this.tableData = res.dataList || []
          this.total = res.total || 0
        })
        .catch()
    },
    // 重置
    reset(evt) {
      // 设置点击按钮后失去焦点
      this.clickHandler(evt)
      this.searchFrom = {
        realName: '',
        pageSize: 10,
        pageIndex: 1
      }
      this.getList()
    },
    // 设置点击按钮后失去焦点
    clickHandler(evt) {
      let target = evt.target
      if (target.nodeName == 'SPAN') {
        target = evt.target.parentNode
      }
      target.blur()
    },
    // 查询
    search() {
      this.searchFrom.pageIndex = 1
      this.getList()
    },
    // 编辑
    handle(type, row) {
      switch (type) {
        case 'add':
          this.dialogParams = {
            visible: true,
            title: '新增用户',
            type: type
          }
          break
        case 'edit':
          this.dialogParams = {
            visible: true,
            title: '编辑用户',
            type: type,
            id: row.id
          }
          break
        case 'detail':
          this.dialogParams = {
            visible: true,
            title: '查看用户信息',
            type: type,
            id: row.id
          }
          break
        case 'role':
          this.roleParams = {
            visible: true,
            title: '配置用户角色',
            type: type,
            id: row.id
          }
          break
        case 'init':
          this.$confirm('您确定要初始化改用户密码吗?', '初始化密码', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              initPwd(row.id)
                .then(res => {
                  this.$message.success('操作成功')
                })
                .catch(() => {})
            })
            .catch()
          break
      }
    },
    // 切换页码
    changePage(val) {
      this.searchFrom.pageIndex = val
      this.getList()
    }
  }
}
</script>

<style scoped>
</style>
